<template>
    <view class="page" style="overflow-x: scroll;">
        <div style="width: 950px; align-content: center;">
            <div style="z-index: -1; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; -ms-flex-direction: column; flex-direction: column;">
                <!-- 头部 Logo 和公司名称 -->
                <div>
                    <div style="display: flex; width: 100%; font-family: 宋体; margin-top: 10px">
                        <div style="width: 100px">
                            <img src="@/static/quanan-log.png" height="70px" width="80px" />
                        </div>
                        <div style="display: flex; flex-direction: column; justify-content: center">
                            <div>
                                <span style="font-size: 28px; color: black; font-weight: bold; line-height: 32px; flex-wrap: nowrap; width: 100%">广 东 全 安 检 测 科 技 有 限 公 司</span>
                            </div>
                            <div style="color: black; font-size: 20px; font-weight: bold">
                                GuangDong QuanAn Testing Technology Co.,Ltd
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 分隔线 -->
                <div style="width: 95%; padding: 0px; background-color: black; margin-top: 3px; font-weight: bold; border-bottom-color: #000; border-bottom-style: solid; border-bottom-width: 2px"></div>
                <div style="width: 95%; padding: 0px; background-color: black; margin-top: 3px; font-weight: bold; border-bottom-color: #000; border-bottom-style: solid; border-bottom-width: 1px"></div>

                <!-- 标题和二维码 -->
                <div style="position: relative; width: 95%; font-family: 宋体;">
                    <div style="display: inline-block; position: absolute; left: 50%; transform: translateX(-50%);">
                        <div style="font-size: 30px !important; color: black; margin-top: 10px;">
                            检 测 报 告
                        </div>
                        <div style="font-size: 30px; color: black; margin-top: 30px; font-family: 宋体;">
                            TEST REPORT
                        </div>
                    </div>
                    <div style="display: inline-block; margin-left: 79%; margin-top: 5px;">
                        <vue-qr :logoSrc="logourl" :margin="3" :text="`http://www.gdquanan.com/#/pages/qr_info/aq?no=${formdata.no}`" :size="130"></vue-qr>
                        <div style="text-align: center; font-size: 10px; line-height: 12px; font-family: 宋体;">
                            扫描二维码辨别报告真伪
                        </div>
                    </div>
                </div>

                <!-- 客户信息和报告编号 -->
                <div style="width: 95%">
                    <div style="margin-bottom: 5px; display: flex; justify-content: space-between; margin-top: 10px;">
                        <div style="display: flex; justify-content: start">
                            <span style="color: black; font-weight: bold; font-size: 16px; font-family: 黑体">客户信息：</span>
                        </div>
                        <div style="width: 300px; text-align: right">
                            <span style="font-weight: bold; font-size: 16px; font-family: 黑体">报告编号：</span>
                            <span style="font-size: 16px; font-family: 宋体; color: black">{{ formdata.no || '' }}</span>
                        </div>
                    </div>

                    <!-- 客户信息表格 -->
                    <div>
                        <table class="daying" style="border-spacing: 0; width: 100%; border-collapse: collapse; font-family: 宋体; color: #000">
                            <tr>
                                <td align="center" style="width: 15%; height: 30px; border: 1px solid #000">
                                    <span style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体">委托单位</span>
                                </td>
                                <td align="center" style="width: 35%; border: 1px solid #000">
                                    <span style="font-size: 14px">{{ formdata.client_name }}</span>
                                </td>
                                <td align="center" style="width: 15%; border: 1px solid #000">
                                    <span style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体">送样单位</span>
                                </td>
                                <td align="center" style="width: 35%; border: 1px solid #000">
                                    <span style="font-size: 14px">{{ formdata.submitUser }}</span>
                                </td>
                            </tr>
                            <tr>
                                <td align="center" style="height: 30px; border: 1px solid #000">
                                    <span style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体">收样日期</span>
                                </td>
                                <td align="center" style="border: 1px solid #000">
                                    <span style="font-size: 14px">{{ vk.pubfn.timeFormat(formdata.detect_time, 'yyyy年MM月dd日') }}</span>
                                </td>
                                <td align="center" style="border: 1px solid #000">
                                    <span style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体">样品状态</span>
                                </td>
                                <td align="center" style="border: 1px solid #000">
                                    <span style="font-size: 14px">{{ formdata.sample_status || '袋装 鲜样' }}</span>
                                </td>
                            </tr>
                            <tr>
                                <td align="center" style="height: 30px; border: 1px solid #000">
                                    <span style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体">检测日期</span>
                                </td>
                                <td align="center" style="border: 1px solid #000">
                                    <span style="font-size: 14px">{{ vk.pubfn.timeFormat(formdata.detect_time, 'yyyy年MM月dd日') }}</span>
                                </td>
                                <td align="center" style="border: 1px solid #000">
                                    <span style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体">检测环境</span>
                                </td>
                                <td align="center" style="border: 1px solid #000">
                                    <span style="font-size: 14px">符合要求</span>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>

                <!-- 样品信息 -->
                <div style="width: 95%; margin-top: 8px">
                    <div style="margin-bottom: 3px">
                        <span style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体">样品信息：</span>
                    </div>
                    <div>
                        <table class="daying" style="border-spacing: 0; width: 100%; border-collapse: collapse; font-family: 宋体; color: #000">
                            <tr>
                                <td align="center" style="width: 15%; height: 30px; border: 1px solid #000">
                                    <span style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体">样品名称</span>
                                </td>
                                <td align="center" style="width: 35%; border: 1px solid #000">
                                    <span style="font-size: 14px">{{ formdata.sample_list && formdata.sample_list.length > 0 ? formdata.sample_list[0].samplename : '' }}</span>
                                </td>
                                <td align="center" style="width: 15%; border: 1px solid #000">
                                    <span style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体">送样规格</span>
                                </td>
                                <td align="center" style="width: 35%; border: 1px solid #000">
                                    <span style="font-size: 14px">{{ formdata.sample_list && formdata.sample_list.length > 0 ? (formdata.sample_list[0].spec || 'g') : '' }}</span>
                                </td>
                            </tr>
                    
                        </table>
                    </div>
                </div>

                <!-- 检测结果标题 -->
                <div style="align-items: center; font-size: 16px; font-weight: bold; margin-top: 8px; margin-bottom: 4px; font-family: 宋体; color: black">
                    检 测 结 果
                </div>

                <!-- 检测结果表格 -->
                <div style="width: 95%">
                    <div>
                        <table class="daying" style="border-spacing: 0; width: 100%; border-collapse: collapse; font-family: 宋体; color: #000">
                            <tr style="height: 30px">
                                <td align="center" width="8%" style="border: 1px solid #000">
                                    <span style="font-weight: bold; font-size: 14px; font-family: 黑体">序号</span>
                                </td>
                                <td align="center" width="18%" style="border: 1px solid #000">
                                    <span style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体">检测项目</span>
                                </td>
                                <td align="center" width="18%" style="border: 1px solid #000">
                                    <span style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体">检测方法</span>
                                </td>
                                <td align="center" width="14%" style="border: 1px solid #000">
                                    <span style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体">检测结果</span>
                                </td>
                                <td align="center" width="14%" style="border: 1px solid #000">
                                    <span style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体">标准要求</span>
                                </td>
                                <td align="center" width="14%" style="border: 1px solid #000">
                                    <span style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体">计量单位</span>
                                </td>
                                <td align="center" width="14%" style="border: 1px solid #000">
                                    <span style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体">单项判定</span>
                                </td>
                            </tr>

                            <!-- 动态行 -->
                            <tr v-for="(detail, index) in formdata.sample_list" :key="index" style="height: 30px; font-size: 14px;">
                                <td align="center" style="border: 1px solid #000">{{ index + 1 }}</td>
                                <td align="center" style="border: 1px solid #000">{{ detail.detection_category }}</td>
                                <td align="center" style="border: 1px solid #000">{{ detail.detection_standard }}</td>
                                <td align="center" style="border: 1px solid #000">{{ detail.result }}</td>
                                <td align="center" style="border: 1px solid #000">{{ detail.standardRequir || '不得检出' }}</td>
                                <td align="center" style="border: 1px solid #000">{{ detail.unit || 'μg/kg' }}</td>
                                <td align="center" style="border: 1px solid #000">{{ detail.yxresult === '阴性' ? '合格' : (detail.yxresult || '合格') }}</td>
                            </tr>
                        </table>

                        <!-- 检测结论 -->
                        <table style="color: black; width: 100%; margin-top: 6px; font-size: 13px; font-family: 宋体; border-collapse: collapse;">
                            <tr>
                                <td rowspan="2" align="center" width="12%" style="border: 1px solid #000; padding: 6px;">
                                    <span style="font-weight: bold; font-family: 黑体">检测结论</span>
                                </td>
                                <td rowspan="2" width="88%" style="border: 1px solid #000; padding: 6px; text-align: left; position: relative;">
                                    <div style="min-height: 90px; display: flex; flex-direction: column; justify-content: space-between;">
                                        <!-- 左上角：见检验检测结果表 -->
                                        <div style="text-align: left; font-size: 13px; font-family: 宋体;">
                                            见检验检测结果表
                                        </div>
                                        <!-- 右下角：检验检测机构盖章 + 印章图片 -->
                                        <div style="display: flex; justify-content: flex-end; align-items: center; margin-top: 8px; position: relative;">
                                            <div style="position: relative; display: inline-block;">
                                                <span style="font-size: 13px; font-family: 宋体; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; font-weight: bold;">检验检测机构盖章</span>
                                                <img src="https://mp-5fe77170-8511-415d-8f6e-02d647d2979a.cdn.bspapp.com/cloudstorage/b79544a0-ae47-4ab4-b62f-8ca500865b90.png"
                                                    width="120px" height="120px" style="display: block; position: relative; z-index: 1;">
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </table>

                        <!-- 备注 -->
                        <table style="color: black; width: 100%; font-size: 13px; font-family: 宋体; border-collapse: collapse;">
                            <tr>
                                <td align="center" width="12%" style="border: 1px solid #000; padding: 6px; border-top: none;">
                                    <span style="font-weight: bold; font-family: 黑体">备注</span>
                                </td>
                                <td width="88%" style="border: 1px solid #000; padding: 6px; text-align: left; border-top: none;">
                                    该检测数据只对当次来样负责，数据仅供参考，不具对社会的证明作用。
                                </td>
                            </tr>
                        </table>
                    </div>

                    <!-- 注释 -->
                    <div style="text-align: left; padding: 4px; font-family: 宋体; color: #000; font-size: 11px; line-height: 14px;">
                        <span style="font-weight: bold; font-family: 黑体">注：#为检出值，单位为 ppb，1ppb=1 μg/kg检测结果：阴性（未检出）；阳性（检出）。</span>
                    </div>
                </div>

                <!-- 签名区域 -->
                <div style="display: flex; margin-top: 15px; flex-direction: row; justify-content: space-between; width: 95%;">
                    <div style="width: 33%; font-size: 16px; font-weight: bold; font-family: 黑体; display: flex; position: relative;">
                        <div>检测人:</div>
                        <div style="position: absolute; left: 28%; top: -80%;">
                            <span>
                                <img v-if="$fn.isNotNull(formdata.detection_user_info.sign_image)" width="100px" height="40px" :src="formdata.detection_user_info.sign_image">
                            </span>
                        </div>
                    </div>
                    <div style="width: 33%; font-size: 16px; font-weight: bold; font-family: 黑体; display: flex; position: relative;">
                        <div>审核人:</div>
                        <div style="position: absolute; left: 28%; top: -60%;">
                            <img src="https://mp-5fe77170-8511-415d-8f6e-02d647d2979a.cdn.bspapp.com/cloudstorage/097aaf25-357c-44d6-8325-27a73b5efde6.png"
                                width="100px" height="40px">
                        </div>
                    </div>
                    <div style="width: 200px;">
                        <span style="font-size: 16px; font-weight: bold; font-family: 黑体;">签发日期:</span>
                        <span style="font-family: 宋体; font-size: 16px; color: black;">{{ vk.pubfn.timeFormat(formdata.detect_time, "yyyy年MM月dd日") }}</span>
                    </div>
                </div>

                <!-- 报告编制说明 -->
                <div style="margin-top: auto; width: 95%; padding-bottom: 8px; padding-top: 8px">
                    <div style="text-align: left; padding: 4px; font-family: 宋体; color: #000;">
                        <div style="font-weight: bold; font-family: 黑体; font-size: 12px; margin-bottom: 3px;">报告编制说明：</div>
                        <table style="border-spacing: 0; width: 100%; border-collapse: collapse; font-family: 宋体; color: #000">
                            <tr>
                                <td align="left" style="width: 50%; padding: 2px 4px; border: 0.5px solid #999; font-size: 10px; line-height: 14px;">
                                    1、本报告未经本实验室书面批准，不得部分复制。
                                </td>
                                <td align="left" style="width: 50%; padding: 2px 4px; border: 0.5px solid #999; font-size: 10px; line-height: 14px;">
                                    2、本报告无本公司"检验检测专用章"无效。
                                </td>
                            </tr>
                            <tr>
                                <td align="left" style="padding: 2px 4px; border: 0.5px solid #999; font-size: 10px; line-height: 14px;">
                                    3、是到本报告未盖章或对报告有异议，本公司不承担其信息准确性的责任。
                                </td>
                                <td align="left" style="padding: 2px 4px; border: 0.5px solid #999; font-size: 10px; line-height: 14px;">
                                    4、本报告无主检人、审核人签字无效，报告涂改、增删无效。
                                </td>
                            </tr>
                            <tr>
                                <td align="left" style="padding: 2px 4px; border: 0.5px solid #999; font-size: 10px; line-height: 14px;">
                                    5、对本检测报告若有异议，应于报告出具之日起五日内向本公司提出，或者到有资质的权威检测机构进行验证，逾期不予受理。
                                </td>
                                <td align="left" style="padding: 2px 4px; border: 0.5px solid #999; font-size: 10px; line-height: 14px;">
                                    6、对于来样检样品，本公司仅对本次送检样品负责。
                                </td>
                            </tr>
                            <tr>
                                <td align="left" style="padding: 2px 4px; border: 0.5px solid #999; font-size: 10px; line-height: 14px;">
                                    7、本报告未经本公司同意不得用于广告、产品宣传等商业行为。
                                </td>
                                <td align="left" style="padding: 2px 4px; border: 0.5px solid #999; font-size: 10px; line-height: 14px;">
                                    8、对本报告若有异议，请于报告签出之日起一日内向本公司提出，逾期不予受理。
                                </td>
                            </tr>
                            <tr>
                                <td align="left" colspan="2" style="padding: 2px 4px; border: 0.5px solid #999; font-size: 10px; line-height: 14px;">
                                    9、特殊信息的填写实际由委托方负责。
                                </td>
                            </tr>
                        </table>
                    </div>

                    <!-- 分隔线 -->
                    <div style="padding: 0px; background-color: black; margin-top: 3px; font-weight: bold; border-bottom-color: #000; border-bottom-style: solid; border-bottom-width: 2px"></div>
                    <div style="padding: 0px; background-color: black; margin-top: 5px; font-weight: bold; border-bottom-color: #000; border-bottom-style: solid; border-bottom-width: 1px"></div>

                    <!-- 页脚信息 -->
                    <div style="display: flex; align-content: space-between; justify-content: space-between; color: #606266; margin-top: 10px">
                        <div style="font-size: 10px; font-family: 黑体;">广 东 全 安 检 测 科 技 有 限 公 司</div>
                        <div style="margin-left: 15%; font-size: 12px; font-family: 黑体; align-content: flex-end; color: #606266">
                            地址：广州市白云区永平街永泰新村和街七巷22号之四5楼502房
                        </div>
                    </div>
                    <div style="display: flex; width: 95%; justify-content: space-between;">
                        <div style="font-size: 10px; font-family: 黑体; color: #606266;">GuangDong QuanAn Testing Technology Co.,Ltd</div>
                        <div style="margin-left: 9.5%; font-size: 10px; font-family: 黑体; color: #606266;">
                            客服电话：020-32784686
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </view>
</template>

<script>
import VueQr from 'vue-qr';
var that; // 当前页面对象
var vk = uni.vk; // vk实例
export default {
    components: {
        VueQr
    },
    data() {
        // 页面数据变量
        return {
            activeName: 'first',
            formdata: {
                sample_list: []
            },
            logourl: require('@/static/logo.png'),
            count: 0
        }
    },
    // 监听 - 页面每次【加载时】执行(如：前进)
    onLoad(options = {}) {
        that = this;
        vk = that.vk;
        that.options = options;
        that.init(options);
    },
    // 监听 - 页面【首次渲染完成时】执行
    onReady() {

    },
    // 监听 - 页面每次【显示时】执行(如：前进和返回)
    onShow() {

    },
    // 监听 - 页面每次【隐藏时】执行(如：返回)
    onHide() {

    },
    // 函数
    methods: {
        // 页面数据初始化函数
        init(options) {
            vk.callFunction({
                url: 'client/pub.get_detectionfrom',
                title: '请求中...',
                data: {
                    no: options.no
                },
                success: (data) => {
                    this.formdata = data.data;
                    this.count = this.formdata.sample_list.length;
                }
            });
        },
    },
    // 过滤器
    filters: {

    },
    // 计算属性
    computed: {

    }
}
</script>

<style lang="scss" scoped>
body {
    overflow-x: scroll !important;
}

.page {
    padding-bottom: 20px;
}

.daying {
    font-size: 12px;
}

.daying tr td {
    font-size: 14px;
    word-break: break-all;
    border: 1px solid rgb(0, 0, 0);
}
</style>
